<template>
  <div class="progress-container">
    <div class="progress-header">
      <h1>📊 学习进度</h1>
      <p v-if="userStore.isAuthenticated">继续努力，{{ userStore.user?.username }}！</p>
      <p v-else>请先登录查看学习进度</p>
      <div v-if="userStore.isAuthenticated" class="actions">
        <el-button type="primary" :loading="progressStore.isLoading" @click="refreshProgress">
          <el-icon><Refresh /></el-icon>
          刷新数据
        </el-button>
      </div>
    </div>

    <div v-if="!userStore.isAuthenticated" class="login-empty">
      <el-empty description="未登录">
        <router-link to="/login">
          <el-button type="primary">去登录</el-button>
        </router-link>
      </el-empty>
    </div>

    <div v-else class="stats">
      <div class="card">
        <div class="label">总学习时长(分钟)</div>
        <div class="value">{{ progressStore.learningProgress.totalStudyTime }}</div>
      </div>
      <div class="card">
        <div class="label">完成题目数</div>
        <div class="value">{{ progressStore.learningProgress.completedQuestions }}</div>
      </div>
      <div class="card">
        <div class="label">答题正确率</div>
        <div class="value">{{ progressStore.learningProgress.accuracy }}%</div>
      </div>
      <div class="card">
        <div class="label">连续学习天数</div>
        <div class="value">{{ progressStore.learningProgress.currentStreak }}</div>
      </div>
    </div>

    <!-- 科目进度 -->
    <div v-if="userStore.isAuthenticated" class="subjects">
      <div class="subjects-header">
        <h3>🧭 科目进度</h3>
      </div>
      <div v-if="progressStore.subjectList.length === 0" class="empty">
        <el-empty description="暂无科目进度数据" />
      </div>
      <div v-else class="subject-list">
        <div v-for="s in progressStore.subjectList" :key="s.name" class="subject-item">
          <div class="subject-top">
            <span class="subject-name">{{ s.name }}</span>
            <span class="subject-count">{{ s.completed }}/{{ s.total }}</span>
          </div>
          <el-progress :percentage="s.percent" :stroke-width="10" status="success" />
          <div class="subject-time">最近学习：{{ formatDate(s.lastStudyTime) }}</div>
        </div>
      </div>
    </div>

    <!-- 练习统计 -->
    <div v-if="userStore.isAuthenticated" class="practice">
      <div class="practice-header">
        <h3>📈 练习统计</h3>
      </div>
      <div v-if="!progressStore.practiceStats" class="empty">
        <el-empty description="暂无练习统计数据" />
      </div>
      <div v-else class="practice-grid">
        <div class="card">
          <div class="label">总练习次数</div>
          <div class="value">{{ progressStore.practiceStats.totalPractice }}</div>
        </div>
        <div class="card">
          <div class="label">平均得分</div>
          <div class="value">{{ progressStore.practiceStats.averageScore }}</div>
        </div>
        <div class="card">
          <div class="label">累计用时(分钟)</div>
          <div class="value">{{ progressStore.practiceStats.totalTime }}</div>
        </div>
      </div>
      <div class="practice-subjects" v-if="progressStore.practiceStats">
        <h4>各科目统计</h4>
        <div class="practice-subject-list">
          <div
            v-for="(stat, name) in progressStore.practiceStats.subjectStats"
            :key="name"
            class="practice-subject-item"
          >
            <span class="name">{{ name }}</span>
            <span class="detail">{{ stat.count }} 次 · 平均 {{ stat.averageScore }}</span>
          </div>
        </div>
      </div>
    </div>

    <div v-if="userStore.isAuthenticated" class="recent">
      <div class="recent-header">
        <h3>📝 最近学习记录</h3>
        <span class="count">{{ progressStore.recentActivities.length }} 条</span>
      </div>
      <div v-if="progressStore.recentActivities.length === 0" class="empty">
        <el-empty description="暂无记录" />
      </div>
      <ul v-else class="list">
        <li v-for="rec in progressStore.recentActivities" :key="rec.id" class="item">
          <div class="topic">{{ rec.topic }}</div>
          <div class="meta">
            <span
              ><el-icon><Clock /></el-icon> {{ rec.duration }} 分钟</span
            >
            <span
              ><el-icon><Check /></el-icon> {{ rec.correctCount }}/{{ rec.questionsCount }} 题</span
            >
            <span
              ><el-icon><TrendCharts /></el-icon>
              {{ Math.round((rec.correctCount / rec.questionsCount) * 100) }}%</span
            >
            <span class="date">{{ formatDate(rec.date) }}</span>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted } from 'vue'
import { useUserStore, useProgressStore } from '@/stores'
import { ElMessage } from 'element-plus'
import { Refresh, Clock, Check, TrendCharts } from '@element-plus/icons-vue'

const userStore = useUserStore()
const progressStore = useProgressStore()

const refreshProgress = async () => {
  if (!userStore.user?.id) return
  await progressStore.fetchUserProgress(userStore.user.id)
  ElMessage.success('数据已刷新')
}

const formatDate = (iso: string) => new Date(iso).toLocaleString()

onMounted(async () => {
  if (userStore.isAuthenticated && userStore.user?.id) {
    await progressStore.fetchUserProgress(userStore.user.id)
  }
})
</script>

<style scoped>
.progress-container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 16px;
}
.progress-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.actions {
  display: flex;
  gap: 8px;
}
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}
.card {
  background: #fff;
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.label {
  color: #666;
  font-size: 13px;
  margin-bottom: 6px;
}
.value {
  font-weight: 700;
  font-size: 20px;
  color: #333;
}
.subjects {
  margin-top: 16px;
}
.subjects-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 8px 0;
}
.subject-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
.subject-item {
  background: #fff;
  border-radius: 8px;
  padding: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
.subject-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.subject-name {
  font-weight: 600;
}
.subject-count {
  color: #666;
  font-size: 12px;
}
.subject-time {
  color: #999;
  font-size: 12px;
  margin-top: 6px;
}

.practice {
  margin-top: 16px;
}
.practice-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 8px 0;
}
.practice-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.practice-subjects {
  margin-top: 12px;
  background: #fff;
  border-radius: 8px;
  padding: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
.practice-subject-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.practice-subject-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 0;
  border-bottom: 1px dashed #eee;
}
.practice-subject-item:last-child {
  border-bottom: none;
}
.practice-subject-item .name {
  font-weight: 600;
}
.practice-subject-item .detail {
  color: #666;
  font-size: 12px;
}
.recent-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 12px 0;
}
.list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.item {
  background: #fff;
  border-radius: 8px;
  padding: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
.topic {
  font-weight: 600;
  color: #333;
}
.meta {
  display: flex;
  gap: 12px;
  color: #666;
  font-size: 13px;
  align-items: center;
}
.meta .date {
  color: #999;
}
.login-empty {
  margin-top: 24px;
}
@media (max-width: 768px) {
  .stats {
    grid-template-columns: repeat(2, 1fr);
  }
  .practice-grid {
    grid-template-columns: 1fr;
  }
  .item {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}
</style>
